﻿import QtQuick 2.0

Item {
    width: 180
    height: 180
    property string imageSource
    property real radius: 80
    property real currenValue: 0
    property real maxValue: 220

    property int lineWidth: 13
    property double startAngle: 130
    property double endAngle: 50
    property double startRadian: startAngle/180*Math.PI
    property double endRadian: endAngle/180*Math.PI

    property color btm_backgroundColor: "#03399F"
    property color top_backgroundColor: "#0085FF"
    Image{
        id: boardImg
        anchors.centerIn: parent
        source: imageSource
        fillMode: Image.PreserveAspectFit
    }

    Canvas{
        id: canvas
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset()
            ctx.translate(canvas.width/2, canvas.height/2)
            // 画背景圆弧
            ctx.save()
            ctx.lineWidth = lineWidth;
            ctx.lineCap = "round"
            ctx.strokeStyle = btm_backgroundColor;
            ctx.beginPath();
            ctx.arc(0, 0, radius, startRadian, endRadian);
            ctx.stroke();
            ctx.restore()

            // 画顶层圆弧
            ctx.save()
            ctx.lineWidth = lineWidth;
            ctx.lineCap = "round"
            ctx.strokeStyle = top_backgroundColor;
            ctx.beginPath();
            ctx.arc(0, 0, radius, startRadian, (Math.PI*2-endRadian)/maxValue*currenValue + startRadian);
            ctx.stroke();
            ctx.restore()
        }
    }

    onCurrenValueChanged: canvas.requestPaint()
}
